<template>
  <div>
    <div class="user-box">
      <user-check-box
        v-model="queryParams.userIds"
        @change="changeOption" :filter-stop="true"
        @apiUserFinish="changeOption"
        :disdisabled="loading"
        class="mgt10 mgb10"
      ></user-check-box>
    </div>
    <div class="line1">
      <div class="left">
        <diy-date :date-type="2" v-model="queryParams.times" @change="changeOption"></diy-date>
      </div>
      <div class="right">
        <export-button :func="func" :query-params="queryParams"  :getTotal="total"></export-button>
        <el-button type="warning" @click="createPayment" :loading="createLoading">生成结算单</el-button>
      </div>
    </div>
    <div class="table">
      <el-table
        border
        :data="tableData"
        v-loading="loading"
      >
        <el-table-column
          prop="shipmentNo"
          label="货件单号"
          align="center"
          min-width="100"
          fixed="left"
        ></el-table-column>
        <el-table-column
          prop="userAccount"
          label="客户"
          align="center"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="transferTypeStr"
          label="收货渠道"
          align="center"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="feeValue"
          label="应收金额"
          align="center"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="制单时间"
          align="center"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="flReceivedTime"
          label="收货时间"
          align="center"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="receivedTime"
          label="到仓时间"
          align="center"
          min-width="100"
        ></el-table-column>

      </el-table>
    </div>
    <div class="font-red mgt10 f14">
      列表筛选时间为到仓时间
    </div>
    <div class="page-wrap mgt10">
      <el-pagination
        background
        layout="total, prev, pager, next, sizes, jumper"
        :current-page.sync="queryParams.page"
        :page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 50, 100, 500, 1000]"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="getData"
      >
      </el-pagination>
    </div>

  </div>
</template>

<script>
import UserCheckBox from "@/views/shipment/components/UserCheckBox.vue";
import DiyDate from "@/views/statistics/components/DiyDate.vue";
import {createUserFinanceShipment, getUserShipmentFee} from "@/api/finance";
import ExportButton from "@/views/order/components/ExportButton.vue";
import router from "@/router";

export default {
  name: "UserSettlementView",
  components: {ExportButton, DiyDate, UserCheckBox},
  data(){
    return {
      queryParams: {
        page: 1,
        pageSize: 20,
        times: [],
      },
      loading: false,
      tableData: [],
      total: 0,
      func: getUserShipmentFee,
      createLoading: false,
    }
  },
  methods: {
    getData(){
      this.loading = true
      getUserShipmentFee(this.queryParams)
        .then(res=>{
          this.loading = false
          this.tableData = res.data
          this.total = res.info.total
        })
    },
    changeOption(){
      this.queryParams.page = 1;
      this.getData()
    },
    handleSizeChange(val){
      this.queryParams.pageSize = val;
      this.changeOption();
    },
    createPayment(){
      this.createLoading = true
      createUserFinanceShipment(this.queryParams)
        .then(res=>{
          this.createLoading = false;
          const data = res.data
          const paymentIds = data.paymentIds || []
          if(paymentIds.length === 0){
            this.$eMsg('当前没有结算数据或数据已经结算了');
            return;
          }
          paymentIds.forEach(paymentId=>{

            const { href } = router.resolve({
              name: 'financeShipmentInfo',
              query: {
                id: paymentId
              }
            })
            window.open(href,'_blank')

          })
        })
    }
  }
}
</script>

<style scoped lang="scss">
.line1{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
